<template>
  <div class="tab-second">
    <el-row class="icon-unit-box">
      <el-col :span="8">
        <t-iconunit title="转发量" desc="人次/人数" type="type1" :unit-data="unit['first']"></t-iconunit>
      </el-col>
      <el-col :span="8">
        <t-iconunit title="转发者带来的访问量" desc="人次/人数" type="type2" :unit-data="unit['second']"></t-iconunit>
      </el-col>
      <el-col :span="8">
        <t-iconunit title="转发者带来的提交量" desc="按人数计算" type="type3" :unit-data="unit['third']"></t-iconunit>
      </el-col>
    </el-row>

    <el-row style="margin: 13px 0;font-size: 13px;">
      <el-col :span="8">
        <el-checkbox v-model="checked" @change="handelCheckChange" style="color: #409EFF">显示同一用户的重复提交</el-checkbox>
      </el-col>
      <el-col :span="16" style="text-align: right">
        <!--<a class="setting" href="javascript:void(0)">修改群组</a>-->
        <a
          class="export exportCustomer"
          :href="`${baseUrl}/formPage/downloadForwardAccessList?logicId=${this.$route.params.id}&filterBlank=${checked?1:0}&__token=${token}`"
          target="_blank">
          <img src="../assets/icon-export-409EFF.png" height="20" alt="export.png">
          <span>导出客户</span>
        </a>
        <!-- <a class="export exportOpenid" href="javascript:void(0)">
           <img src="../assets/icon-export-409EFF.png" height="20" alt="export.png">
           <span>导出Openid</span>
         </a>-->
      </el-col>
    </el-row>

    <el-table :data="list" border v-loading="loading"
              style="width: 100%">
      <el-table-column prop="forwardUser" label="转发者"></el-table-column>
      <el-table-column prop="accessTime" label="带来的访问次数"></el-table-column>
      <el-table-column prop="accessNum" label="带来的访问人数"></el-table-column>
      <el-table-column prop="submitTime" label="带来提交次数"></el-table-column>
      <el-table-column prop="submitNum" label="带来提交人数"></el-table-column>
    </el-table>
    <div class="pagination-text-right">
      <el-pagination layout="total,prev, pager, next"
                     :current-page.sync="currentPage"
                     :total="page.total" :page-size="10" @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>
<script type="text/babel">
  import IconUnit from '../components/IconUnit.vue'
  import { forwardStatistics, forwardList } from '@/service/getData'
  import env from '@/config/env'

  export default {
    data () {
      return {
        loading: false,
        unit: {
          first: '0 / 0',
          second: '0 / 0',
          third: '0.00%'
        },
        checked: false, // 未带来任何流量数据的转发者不显示
        list: [],
        page: {
          current: 1,
          pages: 1,
          size: 10,
          total: 0
        },
        currentPage: 1
      }
    },
    components: {
      't-iconunit': IconUnit
    },
    computed: {
      baseUrl () {
        return env.baseUrl2
      },
      token () {
        return localStorage.getItem('UBToken')
      }
    },
    methods: {
      axiosForwardList (payload) {
        this.loading = true
        forwardList(payload)
          .then((res) => {
            if (res.data && 'code' in res.data && res.data.code === 1) {
              var resJson = res.data
              this.list = resJson.data.list
              this.page = resJson.data.page
            }
          })
          .finally(() => {
            this.loading = false
          })
      },
      axiosForwardStatistics (payload) {
        forwardStatistics(payload)
          .then((res) => {
            if (res.data && 'code' in res.data && res.data.code === 1) {
              var resJson = res.data
              this.unit.first = resJson.data.submitAmount.persionTime + ' / ' + resJson.data.submitAmount.number
              this.unit.second = resJson.data.accessVolume.persionTime + ' / ' + resJson.data.accessVolume.number
              this.unit.third = resJson.data.submitRate.rate
            }
          })
          .finally(() => {
            // this.loading = false;
          })
      },

      // 页面切换
      handleCurrentChange () {
        this.axiosForwardList({
          'logicId': this.$route.params.id,   // 微页面ID
          'filterBlank': this.checked ? 0 : 1, // 过滤未带俩转发量的转发者 1:不过滤掉, 0:过滤掉
          'page': this.currentPage, // 当前页
          'size': 10 // 分页条数
        })
      },
      // check切换
      handelCheckChange () {
        // 防止提交两次请求
        this.currentPage !== 1 ? this.currentPage = 1 : this.handleCurrentChange()
      }
    },
    mounted () {
    },
    activated () {
      this.axiosForwardStatistics({
        'logicId': this.$route.params.id   // 微页面ID
      })
      this.handleCurrentChange()
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss">


</style>
